﻿<div bsModal #RelationModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="RelationModal"
 aria-hidden="true" [config]="{backdrop: 'static'}">
	<div class="modal-dialog modal-lg" style="min-width: 1200px !important;min-height: 8000px !important;">
		<div class="modal-content">
			<form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()">
				<div class="m-subheader ">
					<div class="d-flex align-items-center">
						<div class="mr-auto col-xs-6">
							<h3 class="m-subheader__title m-subheader__title--separator">
								<span>{{l("ArticleTagInfo")}}</span>
							</h3>
						</div>
						<div class="col-sm-6 text-right">
							<audit-log serviceName="ArticleTagInfoAppService" objectName="Magicodes.Admin.Core.Custom.Contents.ArticleTagInfo"></audit-log>
							<button type="button" class="btn btn-success" (click)="exportToExcel()">
								<i class="fa fa-file-excel-o"></i> {{l("ExportToExcel")}}
							</button>
							<button class="btn btn-primary blue" (click)="createArticleTagInfo()">
								<i class="fa fa-plus"></i>{{l("Create")}}
							</button>
							<button type="button" class="btn btn-metal" (click)="getArticleTagInfos()">
								<i class="fa fa-refresh"></i> {{l("Refresh")}}
							</button>
							<button type="button" class="btn default" (click)="getRecycleData()">
								<i class="fa fa-recycle"></i> {{model.isOnlyGetRecycleData?l('Close'):l('RecycleBin')}}
							</button>
							<button type="button" class="close" (click)="close()" aria-label="Close" style="margin-left:15px;">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
					</div>
				</div>
				<div class="m-content">
					<div class="m-portlet m-portlet--mobile">
						<div class="m-portlet__body">
							<div class="m-form m-form--label-align-right">
								<form (submit)="getArticleTagInfos()" autocomplete="off">
									<div class="form-body">
										<div class="row m--margin-bottom-10">
											<label>{{l("Filter")}}</label>
											<div class="input-group">
												<input [(ngModel)]="model.filterText" name="Filter" class="form-control" placeholder="{{l('SearchWithThreeDot')}}"
													type="text">
											</div>
										</div>
									</div>
									<div *ngIf="advancedFiltersAreShown" class="row">
										<div class="col-xl-6">
											<div class="m-checkbox-list">
												<label class="m-checkbox">
													<input type="checkbox" [(ngModel)]="model.creationDateRangeActive" id="model_CreateDateRange" name="CreateDateRange" value="true"> {{l('CreateDateRange')}}
													<span></span>
												</label>
											</div>
											<date-range-picker name="CreateDateRange" [isDisabled]="!model.createDateRange" [(startDate)]="model.creationDateStart" [(endDate)]="model.creationDateEnd" [allowFutureDate]="true">
											</date-range-picker>
										</div>
										<div class="col-xl-6">
											<div class="m-checkbox-list">
												<label class="m-checkbox">
													<input type="checkbox" [(ngModel)]="model.subscriptionEndDateRangeActive" id="model_updateDateRange" name="UpdateDateRange" value="true"> {{l('UpdateDateRange')}}
													<span></span>
												</label>
											</div>
											<date-range-picker name="UpdateDateRange" [isDisabled]="!model.updateDateRange" [(startDate)]="model.subscriptionEndDateStart" [(endDate)]="model.subscriptionEndDateEnd" [allowFutureDate]="false">
											</date-range-picker>
										</div>
									</div>
									<div class="row m--margin-bottom-10">
										<div class="col-sm-6">
											<span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown">
												<i class="fa fa-angle-down"></i> {{l("ShowAdvancedFilters")}}
											</span>
											<span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown">
												<i class="fa fa-angle-up"></i> {{l("HideAdvancedFilters")}}
											</span>
										</div>
									</div>
								</form>
							</div>

							<div class="row align-items-center">
								<!--<Primeng-Datatable-Start>-->
								<div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
									<p-table #dataTable
											 (onLazyLoad)="getArticleTagInfos($event)"
											 [value]="primengTableHelper.records"
											 rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
											 [paginator]="false"
											 [lazy]="true"
											 [responsive]="primengTableHelper.isResponsive" 
											 [scrollable]="true"                                 
											 [style]="{width:'100%'}" >
										<ng-template pTemplate="header">
											<tr>
												
												<th style="width:130px">{{l('Actions')}}</th>
																								<th pSortableColumn="articleInfo" style="width:200px">{{l('ArticleInfo')}}
													<p-sortIcon field="articleInfo"></p-sortIcon>
												</th>
												<th pSortableColumn="name" style="width:200px">{{l('Name')}}
													<p-sortIcon field="name"></p-sortIcon>
												</th>
												<th pSortableColumn="creationTime" style="width:200px">{{l('CreationTime')}}
													<p-sortIcon field="creationTime"></p-sortIcon>
												</th>
											</tr>
										</ng-template>

										<ng-template pTemplate="body" let-record="$implicit" >
											<tr >
												
												<td style="width: 130px">
													<div class="btn-group dropdown" normalizePosition>
														<button class="dropdown-toggle btn btn-sm btn-primary"
																data-toggle="dropdown"
																aria-haspopup="true"
																aria-expanded="false">
															<i class="fa fa-cog"></i><span class="caret"></span> {{l("Actions")}}
														</button>
														<ul class="dropdown-menu" *ngIf="!record.isDeleted">
															<li>
																<a (click)="editArticleTagInfo(record.id)">{{l('Edit')}}</a>
															</li>
															<li>
																<a (click)="deleteArticleTagInfo(record.id)">{{l('Delete')}}</a>
															</li>
																													</ul>
														<ul class="dropdown-menu" *ngIf="record.isDeleted">
															<li>
																<a (click)="restore(record.id)">{{l('Restore')}}</a>
															</li>
														</ul>

													</div>
												</td>
												<td style="width:200px">{{record.articleInfo}}</td>
												<td style="width:200px">{{record.name}}</td>
												<td style="width:200px">
													{{ record.creationTime ? (record.creationTime | momentFormat:'L LT') : '-'}}
												</td>
											</tr>
										</ng-template>
									</p-table>

									<div class="primeng-paging-container">
										<p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
													 #paginator
													 (onPageChange)="getArticleTagInfos($event)"
													 [totalRecords]="primengTableHelper.totalRecordsCount"
													 [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
										</p-paginator>
										<span class="total-records-count">
											{{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
										</span>
									</div>
								</div>
								<!--<Primeng-TurboTable-End>-->
							</div>
						</div>
					</div>
				</div>
			</form>

				<createOrEditArticleInfoArticleTagInfoModal #createOrEditArticleInfoArticleTagInfoModal (modalSave)="getArticleTagInfos()"></createOrEditArticleInfoArticleTagInfoModal>
			</div>
		</div>
</div>